<template>
  <div id="app">
    <el-container >
      <el-header>
        <top/>
      </el-header>
      <!--抬头结束-->
      <el-card style="width: 100%;height: 140px;background-color: rgba(0,0,0,30%)">
        <el-row class="demo-avatar demo-basic">
          <el-col :span="2">
            <div class="demo-basic--circle">
              <div class="block">
                <el-avatar :size="100">
                  <img style="max-width: 100%;max-height: 100%" :src="user.avatar">
                </el-avatar>
              </div>
            </div>
          </el-col>
          <el-col :span="16">
            <div class="operation">
              <el-col :span="24">
                <span
                    style="font-size:25px; font-weight: bolder;position: relative;top: 45px;left: 25px;color: gold">{{ nickName }}</span>
                <!--                <div style="position: relative; top: 30px;left: 400px; width: 400px;height: 80px">-->
                <span style="font-size:20px; position: absolute;top: 15px;left: 400px;color: white">原创: {{ blogCount }}</span>
                <span
                    style="font-size:20px; position: absolute;top: 15px;left: 520px;color: white">总访问量: {{ visitCount }}</span>
                <span style="font-size:20px; position: absolute;top: 60px;left: 400px;color: white">关注: {{ follow }}</span>
                <span style="font-size:20px; position: absolute;top: 60px;left: 520px; cursor: pointer;color: white"
                      @click="drawer = true" >粉丝: {{ fans }}</span>
                <el-drawer
                    title="粉丝列表"
                    :visible.sync="drawer"
                    :direction="direction"
                    :before-close="handleClose">
                  <hr>
                  <span style="color: white">粉丝列表</span>
                  <div style="position: relative">
                    <el-card v-for="f in fansList">
                      <el-avatar :size="50">
                        <img style="max-width: 100%;max-height: 100%"
                             :src="f.avatar">
                      </el-avatar>
                      <span style="margin-left: 20px;color: white">{{ f.nickname }}</span>
                    </el-card>
                  </div>

                </el-drawer>
                <p style="font-size: 18px;position: relative; top: 40px;left: 20px;color: white">个性签名: {{ described }}</p>
                <!--                </div>-->
                <img style="width: 140px; height: 48px;" :src="userTitle" alt="your-image-description"
                     class="floating-image">


                <el-button style="position: absolute;top: 20px;left: 1160px;background-color:whitesmoke" type="info"
                           @click="dialogFormVisible = true" plain>修改个人信息
                </el-button>
                <el-dialog title="修改个人信息" :visible.sync="dialogFormVisible">
                  <!--                                     &lt;!&ndash; 点击头像区域 &ndash;&gt;-->
                  <div class="avatar-container" @click="showDialog" :class="{ 'edit-mode': editMode }">
                    <div class="avatar-wrapper" style="margin-bottom: 35px; width: 180px; height: 180px">
                      <img :src="user.avatar">
                    </div>
                  </div>
                  <!-- 弹出的浮层 -->
                  <el-dialog :visible.sync="dialogVisible" width="30%" style="color: #090909">
                    <el-upload
                        :auto-upload="false"
                        :limit="limitCount"
                        :on-remove="handleRemove"
                        :on-change="onChange"
                        :on-success="handleSuccess"
                        :file-list="fileList"
                        :before-upload="beforeAvatarUpload"
                        action="#"
                        name='file'
                        class="avatar-uploader"
                        list-type="picture-card"
                        accept="image/jpg,image/jpeg,image/png">
                      <img v-if="url" :src="url" class="el-upload-list__item-thumbnail"></img>
                      <i v-else slot="default" class="el-icon-plus"/>
                      <div class="el-upload__tip" slot="tip">加入图片自动上传,"png", "jpg", "jpeg"格式,大小5M以内</div>
                    </el-upload>
                    <div slot="footer" class="dialog-footer" style="position: relative">
                      <el-button @click="dialogVisible = false" style="position: absolute; left: 150px;top: -35px">取
                        消
                      </el-button>
                    </div>
                  </el-dialog>
                  <el-form :model="form">
                    <el-form-item label="用户昵称" :label-width="formLabelWidth" prop="name">
                      <el-input v-model="form.nickname" @input="validateData()" autocomplete="off"></el-input>
                      <span class="error" v-if="error">{{ errornickname }}</span>
                    </el-form-item>
                    <el-form-item label="账号" :label-width="formLabelWidth">
                      <el-input v-model="form.id" autocomplete="on" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="性别" :label-width="formLabelWidth">
                      <el-select v-model="form.sex" placeholder="请选择您的性别">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="个人简介" :label-width="formLabelWidth">
                      <el-input v-model="form.described" @input="valiData()"></el-input>
                      <span class="error" v-if="error">{{ errordescribed }}</span>
                    </el-form-item>
                  </el-form>
                  <el-form slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="update">确定修改</el-button>
                  </el-form>
                </el-dialog>
              </el-col>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <el-container>
        <el-aside width="300px">
          <el-card style="background-color: rgba(0,0,0,0%)" >
            <el-row class="demo-avatar demo-basic">
              <el-col :span="24">
                <span style="text-align: center; font-weight: bolder;color: gold">Lv {{ userLevel }}</span>
                <el-progress :text-inside="true" :stroke-width="26"
                             :percentage=~~(userExperience/(userExperience+requiredExperience)*100)></el-progress>
              </el-col>
            </el-row>
          </el-card>
          <el-card class="box-card" style="width: 298px;background-color: rgba(0,0,0,10%)">
            <div>
              <span style="color: white">头衔墙</span>
            </div>

          <el-row>
            <el-col :span="24"
                    style="overflow: scroll; min-height: 180px;max-height: 360px;display: flex;flex-wrap: wrap;"
                    class="title">
              <el-card style="margin:2px;height: 180px;width: 100%; text-align: center;background-color: rgba(255,255,255,30%)"
                       v-for="index in userTitleList">
                <img :src="index.image" width="130px" height="80px" class="image">
                <div style="padding: 0;">
                  <span style="color: gold">{{ index.titleName }}</span>
                  <div class="bottom clearfix">
                    <hr>
                    <el-button style="position: relative" type="text" class="button"
                               @click="tranfTitle(index.image)">一键佩戴
                    </el-button>
                  </div>
                </div>
              </el-card>
            </el-col>


          </el-row>
          </el-card>
        </el-aside>

        <el-main>
          <el-row>
            <el-col v-for="b in blogData">
              <el-card style="width: 1000px;height: 150px;margin: 0;position: relative" class="card_hover">
                <el-row>
                  <el-col span="5">
                    <a @click="toDetail(b.id,b.userId)">
                      <img :src="b.blogImg" style="width: 170px;height: 100px;">
                    </a>
                  </el-col>
                  <el-col span="18">
                    <a @click="toDetail(b.id,b.userId)">
                      <p class="h-tag">
                        <span class="text1">{{ b.blogTitle }}</span>
                      <p class="desc">{{ b.blogContent }}</p>
                      </p>
                    </a>
                    <div class="operation-i">
                      <a href="personalCenter.html" style="margin-right: 10px;">
                        <span style="color: #0a001f;">作者:{{ b.name }}</span>
                      </a>
                      <i class="el-icon-thumb" style="margin-right: 10px;"><span>{{ b.likes }}赞</span></i>
                      <i class="el-icon-chat-line-round" style="margin-right: 10px;"><span>{{
                          b.collects
                        }}收藏</span></i>
                      <i class="el-icon-view" style="margin-right: 10px;"><span>{{ b.visit }}浏览量</span></i>
                      <i style="margin-right: 10px;"><span>{{ b.typeName }}</span></i>
                    </div>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
      <!--底部开始-->
        <Bottom/>

      <!--底部结束-->
    </el-container>
  </div>
</template>
<script>
import Top from "@/components/Top.vue";
import Bottom from "@/components/Bottom.vue";
import axios from "axios";
import '@/api/request'
// import user from "lemon-imui/examples/database/user";

export default {
  components: {Bottom, Top},
  el: '#app',
  data: function () {
    return {
      fansList:[],
      drawer: false,
      direction: 'ltr',
      error: false,
      //昵称格式错误
      errornickname: '',
      //个人简介格式错误
      errordescribed: '',

      dialog: false,
      loading: false,
      fileList: [],
      limitCount: 1,
      onChangeImgUrl: '',
      form: {
        id: '',
        avatar: '',
        nickname: '',
        sex: '',
        described: '',
      },
      formLabelWidth: '80px',
      timer: null,
      user: '',
      nickName: '',
      described: '',
      avatar: '',
      userId: '',
      blogData: [],
      blogCount: "", visitCount: 0, follow: "", likeCount: "", fans: "",
      a1: 1, a2: 2, a3: 2,
      A: 0,

      userLevel: '',
      userExperience: "",
      requiredExperience: "",

      dialogVisible: false,
      editMode: false,

      // circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      sizeList: ["large", "medium", "small"],

      dialogTableVisible: false,
      dialogFormVisible: false,

      blog: {current: "", id: ""},
      countDown: 1,

      //用户当前头衔
      userTitle: null,
      //全部头衔列表信息（包括头衔地址、名字）
      titleList: [],
      //用户所拥有的头衔列表
      userTitleList: [],
    }
  },
  created() {
    this.region();
    this.loadBlogList();
    this.getFansList();
  },
  mounted() {
    this.A = this.a1 + this.a2 + this.a3;
    this.initTitleList()
    this.UserTitle()
  },
  methods: {
    getFansList(){
      let url = "http://localhost:8088/userFollow/fansList"
      axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.code === 1) {
          this.fansList = jsonResult.data;
        }
      });
    },
    validateData() {
      if (!(this.form.nickname.match(/^(?![_]).{2,7}$/))) {
        this.error = true;
        this.errornickname = '昵称长度应是3-8位,且不能以下划线开头';
      } else {
        this.error = false;
        this.errornickname = '';
      }
    },

    valiData() {
      if (!(this.form.described.match(/^.{5,39}$/))) {
        this.error = true;
        this.errordescribed = '个人简介长度应是5-40位，请输入正确的个人简介';
      } else {
        this.error = false;
        this.errordescribed = '';
      }
    },
    restart() {
      const h = this.$createElement;
      this.$msgbox({
        title: '修改成功! 是否重新登陆?',
        message: h('p', null, [
          h('span', null, '个人信息修改完成, 是否立即'),
          h('i', {
            style: 'color: teal',
            on: {
              click: () => {
                this.dialogFormVisible = false
                let url = 'http://localhost:8088/user/logout'
                this.axios.post(url).then(function () {
                  localStorage.clear();//清空登录成功时保存的数据
                  window.location.href = "index.html"
                })
              }
            }
          }, ' 重新登陆 '),
          h('span', null, '以生效设置?'),
        ]),
        showCancelButton: true,
        confirmButtonText: '立即登录',
        cancelButtonText: '稍后登陆',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            this.dialogFormVisible = false
            let url = 'http://localhost:8088/user/logout'
            this.axios.post(url).then(function () {
              localStorage.clear();
              window.location.href = "loginByPassword.html"
            })
          } else {
            window.location.href = "personalCenter.html"
          }
        }
      }).then(action => {
      });
    },
    handleRemove(file, fileList) {
      this.onChangeImgUrl = ''
    },
    handleSuccess(res, file) {
      this.onChangeImgUrl = res.data
    },
    beforeAvatarUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      return isLt5M
    },
    onChange(file) {
      console.log(file)
      let formData = new FormData();
      formData.append("file", file.raw);
      axios.post('http://localhost:8088/qiniu/uploadImg', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
      }).then((res) => {
        if (res.data.code === 1) {
          this.$message.success('上传成功')
          this.onChangeImgUrl = res.data.data
          this.form.avatar = this.onChangeImgUrl
          this.dialogVisible = false;
        } else {
          this.$message.error(res.data.msg)
        }
      });
    },
    timeDown() {
      this.timer = setInterval(() => {
        if (this.countDown > 0) {
          this.countDown--;
        } else {
          clearInterval(this.timer);
          this.dialogFormVisible = false;
        }
      }, 1000);
    },
    update() {
      this.form.id = this.user.id;
      let message = {...this.form};
      if (!(isNaN(message.avatar) || message.avatar == null)) {
        message.avatar = this.avatar
      }
      if (!(isNaN(message.nickname) || message.nickname == null)) {
        delete message.nickname
      }
      if (!(isNaN(message.sex) || message.sex == null)) {
        delete message.sex;
      }
      if (!(isNaN(message.described) || message.described == null)) {
        console.log("判断是否为空:::::::::::::::::::::::::::::::::" + message.described.toString())
        delete message.described;
      }
      let url = 'http://localhost:8088/user/update';
      axios.put(url, message).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.code === 1) {
          this.$message.success(jsonResult.data);
          this.restart()
          // this.timeDown();
        } else {
          this.$message(response.data.msg)
        }
      })
    },
    region() {
      this.user = localStorage.user ? JSON.parse(localStorage.user) : null
      axios.get("http://localhost:8088/user/me").then(res => {
        this.userTitle = res.data.data.headTitle
        this.fans=res.data.data.fans;
        this.follow=res.data.data.follow;
      })
      this.userId = this.user.id
      this.userLevel = this.user.level
      this.nickName = this.user.nickname
      this.userExperience = this.user.experience
      this.requiredExperience = this.user.requiredExperience
      this.described = this.user.described
      this.avatar = this.user.avatar

      if (this.follow == null) {
        this.follow = 0;
      }
      if (this.fans === null) {
        this.fans = 0;
      }
    },
    loadBlogList() {
      let url = 'http://localhost:8088/blog/selectMyBlog'
      axios.get(url).then((response) => {
        console.log(response)
        let jsonResult = response.data;
        if (jsonResult.code === 1) {
          this.blogData = jsonResult.data;
          this.blogCount = jsonResult.data.length;
          for (let i = 0; i < this.blogCount; i++) {
            this.visitCount += parseInt(jsonResult.data[i].visit)
          }
        } else {
          this.$message(response.data.msg)
        }
      });
    },
    toDetail(id, userId) {
      localStorage.setItem('id', id);
      localStorage.setItem('userId', userId);
      window.location.href = "detail.html"
    },


    open() {
      this.$prompt('', '修改信息', {
        confirmButtonText: '确定修改',
        cancelButtonText: '取消',
      }).then(({value}) => {
        this.$message({
          type: 'success',
          message: '修改成功'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '您已取消修改'
        });
      });
    },
    showDialog() {
      this.dialogVisible = true;
      this.editMode = true;
    },
    initTitleList() {
      axios.get('http://localhost:8088/title/list').then(res => {
        if (res.data.code === 1) {
          this.titleList = res.data.data.list;
        }
      })
    },
    UserTitle() {
      axios.get('http://localhost:8088/userTitle/userTitle').then(res => {
        if (res.data.code === 1) {
          this.userTitleList = res.data.data;

        }
      })
    },
    tranfTitle(titleImage) {

      axios.get('http://localhost:8088/userTitle/updateUserTitle?titleImage=' + titleImage).then(res => {
        console.log("-----------------------" + titleImage)
        if (res.data.code === 1) {
          console.log(titleImage)
          this.userTitle = titleImage;
        } else {
          alert("佩戴失败")
        }
      })

    },
  }
}
</script>
<style>
.error {
  color: rgba(255, 0, 0, 0.6);
}

.center {
  width: 100%;
  margin: 0 auto;
}

.el-aside {
  color: #333;
}



body > .el-container {
  margin-bottom: 40px;

}
.el-container{
    background: url(http://rww08uahf.hn-bkt.clouddn.com/0dd8ed5b730c4df7babec5898c4b641c.png);
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

/*走马灯开始*/
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
}

.el-carousel__item:nth-child(2n+1) {
}

/*    卡片开始*/
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
}

/*    卡片结束*/
.desc {
  height: 40px;
  color: #555666;
  font-size: 15px;
  font-weight: 400;
  overflow: hidden; /* 控制文本溢出是如何进行的 */
  word-break: break-word; /*自动换行*/
  white-space: nowrap;
  text-overflow: ellipsis; /* 溢出时显示省略号 */
}

.operation-i {
  min-width: 40px;
  text-align: start;
  font-size: 12px;
  padding-right: 50px;
  color: #555666;
  line-height: 10px;
  padding-top: 0;
  display: flex;
}

.text1 {
  font-family: PingFang SC, Hiragino Sans GB, Arial, Microsoft YaHei, Verdana, Roboto, Noto, Helvetica Neue, sans-serif;
}

/*图片悬浮*/
.floating-image {
  position: absolute;
  top: -8px;
  left: 120px;
  z-index: 1;
}

.item {
  margin-top: 10px;
  margin-right: 40px;
}

/*评论回复*/

.avatar-container {
  position: relative;
  top: 0%; /* 相对于容器顶部的偏移量为 50% */
  left: 40%; /* 相对于容器左侧的偏移量为 50% */
  /*transform: translate(-50%, -50%); !* 使用 transform 属性进行微调 *!*/
  /* 可以设置内容区域的宽度、高度、背景色等样式 */

}

.avatar-wrapper {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #00bcd4; /* 设置边框的颜色和粗细 */
}

.avatar-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
}

.avatar-container.edit-mode::after {
  content: ''; /* 由于是伪元素，要设置 content 属性，否则可能会出现兼容性问题 */
  position: absolute; /* 绝对定位，相对于头像容器进行定位 */
  bottom: 0; /* 与头像容器底部对齐 */
  left: 0; /* 与头像容器左侧对齐 */
  width: 16%;
  height: 80%; /* 高度为头像容器高度的 80% */
  z-index: 1; /* 图层的 z-index 值为 1，使其位于头像图片下面，与半透明层重叠 */
}

.avatar-edit-icon {
  position: absolute; /* 设置绝对定位，相对于头像容器进行定位 */
  bottom: 5px; /* 距离头像容器底部的距离为 5 像素 */
  right: 5px; /* 距离头像容器右侧的距离为 5 像素 */
  font-size: 20px; /* 设置字体大小为 20 像素 */
  color: #3dc0d0; /* 设置字体颜色为白色 */
  z-index: 2; /* 图层的 z-index 值为 2，使其位于头像图片之上 */
}

.title::-webkit-scrollbar {
  width: 0;
}
</style>
